<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
	<div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
            新生儿疾病筛选系统报表统计，统计数据供直观分析，增强数据挖掘、整合的能力
        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <!--<div class="row">-->
            <!--<div class="col-sm-6">-->
                <!--<div class="ibox float-e-margins">-->
                    <!--<div class="ibox-title">-->
                        <!--<h5>折线图</h5>-->
                        <!--<div class="ibox-tools">-->
                            <!--<a class="collapse-link">-->
                                <!--<i class="fa fa-chevron-up"></i>-->
                            <!--</a>-->
                            <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                <!--<i class="fa fa-wrench"></i>-->
                            <!--</a>-->
                            <!--<ul class="dropdown-menu dropdown-user">-->
                                <!--<li><a href="#">选项1</a>-->
                                <!--</li>-->
                                <!--<li><a href="#">选项2</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--<a class="close-link">-->
                                <!--<i class="fa fa-times"></i>-->
                            <!--</a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="ibox-content">-->
                        <!--<div class="echarts" id="echarts-line-chart"></div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="col-sm-6">-->
                <!--<div class="ibox float-e-margins">-->
                    <!--<div class="ibox-title">-->
                        <!--<h5>柱状图</h5>-->
                        <!--<div class="ibox-tools">-->
                            <!--<a class="collapse-link">-->
                                <!--<i class="fa fa-chevron-up"></i>-->
                            <!--</a>-->
                            <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                <!--<i class="fa fa-wrench"></i>-->
                            <!--</a>-->
                            <!--<ul class="dropdown-menu dropdown-user">-->
                                <!--<li><a href="#">选项1</a>-->
                                <!--</li>-->
                                <!--<li><a href="#">选项2</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--<a class="close-link">-->
                                <!--<i class="fa fa-times"></i>-->
                            <!--</a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="ibox-content">-->

                        <!--<div class="echarts" id="echarts-bar-chart"></div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="row">
            <!--<div class="col-sm-6">-->
                <!--<div class="ibox float-e-margins">-->
                    <!--<div class="ibox-title">-->
                        <!--<h5>散点图</h5>-->
                        <!--<div class="ibox-tools">-->
                            <!--<a class="collapse-link">-->
                                <!--<i class="fa fa-chevron-up"></i>-->
                            <!--</a>-->
                            <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                <!--<i class="fa fa-wrench"></i>-->
                            <!--</a>-->
                            <!--<ul class="dropdown-menu dropdown-user">-->
                                <!--<li><a href="#">选项1</a>-->
                                <!--</li>-->
                                <!--<li><a href="#">选项2</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--<a class="close-link">-->
                                <!--<i class="fa fa-times"></i>-->
                            <!--</a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="ibox-content">-->
                        <!--<div class="echarts" id="echarts-scatter-chart"></div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="col-sm-6">-->
                <!--<div class="ibox float-e-margins">-->
                    <!--<div class="ibox-title">-->
                        <!--<h5>K线图</h5>-->
                        <!--<div class="ibox-tools">-->
                            <!--<a class="collapse-link">-->
                                <!--<i class="fa fa-chevron-up"></i>-->
                            <!--</a>-->
                            <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                <!--<i class="fa fa-wrench"></i>-->
                            <!--</a>-->
                            <!--<ul class="dropdown-menu dropdown-user">-->
                                <!--<li><a href="#">选项1</a>-->
                                <!--</li>-->
                                <!--<li><a href="#">选项2</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--<a class="close-link">-->
                                <!--<i class="fa fa-times"></i>-->
                            <!--</a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="ibox-content">-->
                        <!--<div class="echarts" id="echarts-k-chart"></div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>饼状图</h5>
                        <div class="ibox-tools">
                            <!--<a class="collapse-link">-->
                                <!--<i class="fa fa-chevron-up"></i>-->
                            <!--</a>-->
                            <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                <!--<i class="fa fa-wrench"></i>-->
                            <!--</a>-->
                            <!--<ul class="dropdown-menu dropdown-user">-->
                                <!--<li><a href="#">选项1</a>-->
                                <!--</li>-->
                                <!--<li><a href="#">选项2</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--<a class="close-link">-->
                                <!--<i class="fa fa-times"></i>-->
                            <!--</a>-->
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript" th:inline="javascript">
	    $(function () {
	        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
	        var pieDataList = [[${pieDataList}]]
            console.log('pieDataList is',pieDataList)
	        var pieoption = {
                title: {
                    text: '新生儿疾病筛选不同状态人数',
                    subtext: '仅限本系统',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '疾病筛选状态',
                        type: 'pie',
                        radius: '50%',
                        data: pieDataList,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
	        pieChart.setOption(pieoption);
	        $(window).resize(pieChart.resize);
	    });
    </script>
</body>
</html>
